import { Alert, AlertTitle, Grid } from "@mui/material";
import { Box } from "@mui/system";
import React from "react";
import { useContext } from "react";
import { useState } from "react";
import { useEffect } from "react";
import Loading from "../../../components/loading";
import MyCard from "../../../components/MyCard";
import { queryClient } from "../../../query/CustomQueryClient";
import useScore from "../../../query/useScore";
import { TitleContext } from "../../../router";
import "./ScorePage.css";
export default function ScorePage() {
  const bgcolors = [
    "rgb(220 209 252)",
    "rgb(209, 233, 252)",
    "rgb(252 209 242)",
    "rgb(209 252 216)",
    "rgb(247 252 209)",
    "rgb(252 230 209)",
    "rgb(252 209 209)",
    "rgb(209 252 238)",
  ];
  const nowTitle = useContext(TitleContext);
  useEffect(() => {
    nowTitle.setnowTitle(2);
    queryClient.clear();
  }, []);

  const { data, isFetching, isError, error, isSuccess } = useScore();

  const [scoreData, setScoreData] = useState({});

  useEffect(() => {
    if (isSuccess) {
      setScoreData(data.data.data);
    }
  }, [isSuccess, isError]);

  return (
    <div>
      {isSuccess && !isFetching && (
        <div class="totalScore">
          <Alert severity="success" sx={{ width: "48%", marginLeft: "1%" }}>
            <AlertTitle>总绩点</AlertTitle>
            <strong>{Math.floor(scoreData.totalScore * 100) / 100}</strong>
          </Alert>
          <Box sx={{ flexGrow: 1 }} />
          <Alert severity="info" sx={{ width: "48%", marginRight: "1%" }}>
            <AlertTitle>总排名</AlertTitle>
            <strong>{scoreData.totalRank}</strong>
          </Alert>
        </div>
      )}
      {isSuccess && !isFetching && (
        <div className="Score-body">
          {scoreData?.data?.map((value, key) => {
            return (
              <MyCard
                color={bgcolors[key % 8]}
                name={value.name}
                usualscore={value.daily}
                examscore={value.exam}
                score={value.total}
                delay={key * 50}
                weight={value.weight}
                rank={value.rank}
              />
            );
          })}
        </div>
      )}
      {isFetching && <Loading />}
    </div>
  );
}
